import React from "react";
import { Image, Typography } from "antd";
import { withRouter, RouteComponentProps, Link } from "react-router-dom";

interface PropsType extends RouteComponentProps {
    id: string | number;
    size: "large" | "small";
    imageSrc: string;
    price: number | string;
    title: string;
}

const ProductImageComponent: React.FC<PropsType> = ({
    id,
    size,
    imageSrc,
    price,
    title,
    history,
    location,
    match,
}) => {
    // console.log(history)
    // console.log(location)
    // console.log(match)
    return (
        <Link to={`detail/${id}`}>
            {size === "large" ? (
                <Image
                    preview={false}
                    src={imageSrc}
                    height={285}
                    width={490}
                />
            ) : (
                <Image
                    preview={false}
                    src={imageSrc}
                    height={120}
                    width={240}
                />
            )}
            <div>
                <Typography.Text type="secondary">
                    {title.slice(0, 25)}
                </Typography.Text>
                <Typography.Text type="danger" strong>
                    ¥ {price} 起
                </Typography.Text>
            </div>
        </Link>
    );
};

export const ProductImage = withRouter(ProductImageComponent);
